<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
     
      /* div{
          width: 100px;
          height: 100px;
          background-color: hotpink;
          position:absolute;
      } */

     </style>
</head>
<body>
    
      <button>开始</button>
      <button>暂停</button>
  
        <div style=' width: 100px; height: 100px; background-color: hotpink;position:absolute;left:100px;top:100px'></div>

</body>
</html>
<script>
  
  let divObj = document.getElementsByTagName('div')[0];
  let btnList = document.querySelectorAll('button');

  //开始
  btnList[0].onclick=()=>{

    /*
      注意： 在使用 元素节点.style.样式属性值的时候 一定要记得必须行内式中有的属性才能获得值，没有返回为"";
    */

     //获得div元素的left的值
    //  let left_x = divObj.style.left;
    //  console.log(left_x);
    let w= divObj.style.width;
    let h= divObj.style.height;
    let bg =divObj.style.backgroundColor;
    let left =divObj.style.left;

    console.log(`${w}---${h}---${bg}---${left}`);

     /**
      *  设置样式属性值的时 不管是行内是 ，内嵌式，外部链接 
      * 统统都是 元素节点.style.样式属性= 值 来修改样式的值
      * 
      * 
      * /



  }
    //暂停
    btnList[1].onclick=()=>{
      
    }


</script>